<template>
  <div class="login-content">
    <div class="login-box">
      <div class="left">
        <div class="logo">
          <img src="@/assets/logo.png" alt="" />
        </div>
        <div class="title">
          <h1>欢迎使用 码链星聚 软件开发协同平台</h1>
        </div>
        <div class="login-form">
          <a-form
            :rules="rules"
            :model="formData"
            :label-col="{ span: 0 }"
            :wrapper-col="{ span: 10 }"
            @finish="onFinish"
          >
            <a-form-item>
              <span class="login-title">登录</span>
            </a-form-item>
            <a-form-item label="" name="username">
              <a-input
                v-model:value="formData.username"
                placeholder="请输入用户名"
              >
                <template #suffix>
                  <UserOutlined />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item label="" name="password">
              <a-input
                v-model:value="formData.password"
                type="password"
                placeholder="请输入密码"
              >
                <template #suffix>
                  <EyeInvisibleOutlined />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-checkbox v-model:checked="isRemember">记住密码</a-checkbox>
              <!-- <a class="login-forget" href="">忘记密码</a> -->
            </a-form-item>
            <a-form-item>
              <a-button type="primary" html-type="submit" block>登录</a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
      <div class="right"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { UserOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
import { encryptedData, decryptedData } from '@/utils';
const formData = reactive({
  username: '',
  password: '',
});
const isRemember = ref(false);
const rules = {
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur',
    },
    {
      min: 6,
      max: 15,
      message: '用户名长度在 6 到 15 个字符',
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
    {
      min: 8,
      max: 30,
      message: '密码长度在 8 到 30 个字符',
    },
  ],
};
const initData = () => {
  const isRememberCach = localStorage.getItem('isRemember');
  if (isRememberCach) {
    isRemember.value = true;
    const loginData = JSON.parse(localStorage.getItem('loginData') as string);
    formData.username = loginData.username;
    formData.password = decryptedData(loginData.password);
  }
};
const setCachData = () => {
  if (isRemember.value) {
    const loginData = {
      username: formData.username,
      password: encryptedData(formData.password),
    };
    localStorage.setItem('loginData', JSON.stringify(loginData));
  } else {
    localStorage.removeItem('loginData');
  }
  localStorage.setItem('isRemember', isRemember.value);
};
const onFinish = () => {
  setCachData();
};
onMounted(() => {
  initData();
});
</script>
<style lang="scss" scoped>
.login-content {
  width: 100%;
  height: 100%;
  background: url('@/assets/image/login/login-bg.png') no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-box {
  width: 90%;
  height: 95%;
  padding: 120px;
  // border-radius: 1.25rem;
  background: url('@/assets/image/login/login-session-bg.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  .left {
    width: 50%;
    .logo {
      height: 48px;
      img {
        height: 100%;
      }
    }
    .title {
      height: 128px;
      display: flex;
      align-items: center;
      h1 {
        font-size: 24px;
        font-family: PingFang-SC !important;
        font-weight: 320 !important;
      }
    }
    .login-form {
      .login-title {
        font-size: 24px;
      }
    }
  }
  .right {
    width: 50%;
    background: url('@/assets/image/login/back.png') no-repeat;
    background-size: 100% 90%;
    background-position: 20% 0;
  }
}
</style>
px;
